import React, { useState, useEffect } from 'react';
import { loc, obj_str, obj_empty } from 'sui';
import { reload } from './cmd';
import { XbarView } from './view/xbar/view';
import { SpcView } from './view/base/view';

const Spc = ({ location: { search } }) => {
    const [main, setMain] = useState();

    useEffect(() => {
        const tmp = search.split("=");
        if (tmp.length >= 2) {
            reload(tmp[1], setMain);
        }
        else {
            setMain(null);
        }
    }, [search]);

    const getView = () => {
        if (obj_empty(main)) {
            return null;
        }

        const tp = obj_str(main, "tp");
        if (tp === "xbar") {
            return <XbarView cfg={main}/>;
        }
        else if (tp === "p") {
            return <SpcView url="p" yper={true} mul={100} cfg={main} title={`P${loc("product_56")}`}/>;
        }
        else if (tp === "u") {
            return <SpcView url="u" yper={true} mul={100} cfg={main} title={`U${loc("product_56")}`}/>;
        }
        else if (tp === "c") {
            return <SpcView url="c" mul={1} ctype={false} cfg={main} title={`C${loc("product_56")}`}/>;
        }
        else if (tp === "np") {
            return <SpcView url="np" mul={1} ctype={false} cfg={main} title={`Np${loc("product_56")}`}/>;
        }

        return null;
    };

    return getView();
};

export {Spc};
